<template>
   <div>
     <el-radio-group v-model="radioValue" v-if="dataList.length<5">
       <el-radio-button :label="item.id" v-for="item in dataList" :key="item.id">{{item[nameKey]}}</el-radio-button>
     </el-radio-group>
     <el-select v-model="radioValue" v-else>
       <el-option :label="item.name" v-for="item in dataList" :key="item.id" :value="item.id">{{item[nameKey]}}</el-option>
     </el-select>

   </div>
</template>
<script lang="ts" setup>
import  {onMounted,ref,computed} from  'vue'
import {get} from '@/utils/request'
import item from "../../layout/components/Sidebar/Item.vue";

const  props=defineProps({
   url: {
     type: String
   },
   valueProp:{

   },
  nameKey:{
     type:String,
     default:'name'
  }
})

const emit = defineEmits(['update:valueProp']);

const radioValue=computed({
  get() {
    return props.valueProp
  },
  set(val) {
    emit('update:valueProp', val)
  }
})


const dataList=ref([])

function  initData(){
  get(props.url,{}).then(res=>{
      dataList.value=res
  })
}

onMounted(()=>{
   initData()
})
</script>
